<!-- 表单 》 多选状态 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="`CoreWeb-Checkbox${isBtn ? 'Btn' : ''}All`">
      <el-checkbox-button v-if="hasAll && isBtn" v-model="isAll" v-bind="allProps" @change="changeAll" />
      <el-checkbox v-else-if="hasAll && isCheckbox" v-model="isAll" v-bind="allProps" @change="changeAll" />
    </div>

    <el-checkbox-group
      v-if="isBtn"
      v-model="model"
      v-bind="commonProps"
      :class="`${className} CoreWeb-CheckboxBtnGroup`"
      @change="emitChange"
    >
      <el-checkbox-button
        v-for="(item, i) in selectData"
        :key="`${item[0]}-${i}`"
        :class="getHideClass(item)"
        :label="item[0]"
        :disabled="getDisabled(item)"
      >
        <span :class="`CoreWeb-checkbox-btn CoreWeb-checkbox-btn-${item[colorIndex] || 'color'}`">
          <slot name="item" :item="item">
            <span>{{ item[1] }}</span>
            <span v-if="showRight" class="CoreWeb-checkbox-btn-right">{{ item[rightIndex] }}</span>
          </slot>
        </span>
      </el-checkbox-button>
    </el-checkbox-group>

    <el-checkbox-group
      v-else-if="isCheckbox"
      v-model="model"
      v-bind="commonProps"
      :class="`${className} CoreWeb-CheckboxGroup`"
      @change="emitChange"
    >
      <el-checkbox
        v-for="(item, i) in selectData"
        :key="`${item[0]}-${i}`"
        :class="getHideClass(item)"
        :label="item[0]"
        :disabled="getDisabled(item)"
      >
        <span :class="`CoreWeb-checkbox CoreWeb-checkbox-${item[colorIndex] || 'color'}`">
          <slot name="item" :item="item">
            <span>{{ item[1] }}</span>
            <span v-if="showRight" class="CoreWeb-checkbox-right">{{ item[rightIndex] }}</span>
          </slot>
        </span>
      </el-checkbox>
    </el-checkbox-group>

    <el-select
      v-else
      v-model="model"
      v-bind="commonProps"
      :placeholder="CORE.isEmpty(model) ? placeholder : ''"
      :filterable="!noSearch"
      :clearable="!noClear"
      :multiple-limit="limit"
      :collapse-tags="fold"
      multiple
      @change="emitChange"
    >
      <el-option
        v-for="(item, i) in selectData"
        :key="`${item[0]}-${i}`"
        :class="getHideClass(item)"
        :value="item[0]"
        :label="item[1]"
        :disabled="getDisabled(item)"
      >
        <div :class="`CoreWeb-option CoreWeb-option-${item[colorIndex] || 'color'}`">
          <slot name="item" :item="item">
            <div>{{ item[1] }}</div>
            <div v-if="showRight" class="CoreWeb-option-right">{{ item[rightIndex] }}</div>
          </slot>
        </div>
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixForm from '../mixForm'
import FormSelectMulti from '../FormSelectMulti'
import FormStatus from '../FormStatus'

const name = 'FormStatusMulti'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return FormSelectMulti.data()
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否显示右侧辅助信息
     */
    showRight: FormSelectMulti.computed.showRight,

    /**
     * 弹出层样式类
     */
    popperClass: FormSelectMulti.computed.popperClass,

    /**
     * 状态字典
     */
    STATUS: FormStatus.computed.STATUS,

    /**
     * 下拉框数据
     */
    selectData: FormStatus.computed.selectData,

    /**
     * 所有 ID 列表
     */
    allIdList() {
      return this.STATUS.map(([id]) => id)
    },

    /**
     * 有效 ID 列表
     */
    validIdList: FormSelectMulti.computed.validIdList,

    /**
     * 全选属性
     */
    allProps: FormSelectMulti.computed.allProps,
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: FormSelectMulti.methods,
}
</script>
